<script>
import {h, defineComponent} from 'vue';
import draggable from 'vuedraggable/src/vuedraggable';

export default defineComponent({
  name: 'DragBox',
  props: ['rule', 'tag', 'formCreateInject'],
  render(ctx) {
    const subRule = {...ctx.$props.rule.props, ...ctx.$attrs};
    let _class = subRule.tag + '-drag drag-box';
    if (!Object.keys(ctx.$slots).length) {
      _class += ' ' + subRule.tag + '-holder';
    }
    subRule.class = _class;
    subRule.modelValue = [...this.$props.formCreateInject.children];

    const keys = {};
    if (ctx.$slots.default) {
      const children = ctx.$slots.default();
      children.forEach(v => {
        if (v.key) {
          keys[v.key] = v;
        }
      })
    }

    return h(draggable, subRule, {
      item: ({element}) => {
        return element?.__fc__?.key ? h('div', {}, keys[element.__fc__.key + 'fc']) : undefined;
      }
    });
  }
});
</script>
